function pei(id,data){
	var chart = echarts.init(document.getElementById(id));
	chart.clear();
	var placeHolderStyle = {
		normal: {
			label: {
				show: false
			},
			labelLine: {
				show: false
			},
			color: "rgba(0,0,0,0)",
			borderWidth: 0
		},
		emphasis: {
			color: "rgba(0,0,0,0)",
			borderWidth: 0
		}
	};
	
	
	var dataStyle = {
		normal: {
			formatter: '{c}%',
			position: 'center',
			show: true,
			textStyle: {
				fontSize: '30',
				fontWeight: 'normal',
				color: '#fff'
			},
		}
	};
	var option = {
		title: [{
			text: data.title,
			left: '60%',
			top: '30%',
			textAlign: 'center',
			textStyle: {
				fontWeight: 'normal',
				fontSize: '54',
				color: '#fff',
				textAlign: 'center',
			},
			subtext:data.subtext,
			subtextStyle: {
				fontWeight: 'normal',
				fontSize: '26',
				color: '#A1A0A1',
				textAlign: 'center',
			},
		}],
	
		//第一个图表
		series: [{
				type: 'pie',
				hoverAnimation: false,
				radius: ['50%', '70%'],
				center: ['20%', '50%'],
				labelLine: {
					normal: {
						show: false
					}
				},
				label: {
					normal: {
						position: 'center'
					}
				},
				data: [{
						value: 1,
						itemStyle: {
							normal: {
								color: '#989B9E'
							}
						},
					}, 
	
				]
			},
			//上层环形配置
			{
				type: 'pie',
				hoverAnimation: false, 
				radius: ['50%', '70%'],
				center: ['20%', '50%'],
				startAngle: 90,
				labelLine: {
					normal: {
						show: false
					}
				},
				label: {
					normal: {
						position: 'center'
					}
				},
				data: [ {
						value: data.data1,
						itemStyle: placeHolderStyle,
					},{
						value: data.data2,
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
									offset: 1,
									color: '#C8B07D'
								}, {
									offset: 0,
									color: '#D27259'
								}])
							}
						},
						label: dataStyle,
					}
	
				]
			},
		]
	};
	chart.setOption(option);
}
function pei2(id,data){
	var chart = echarts.init(document.getElementById(id));
	chart.clear();
	var placeHolderStyle = {
		normal: {
			label: {
				show: false
			},
			labelLine: {
				show: false
			},
			color: "rgba(0,0,0,0)",
			borderWidth: 0
		},
		emphasis: {
			color: "rgba(0,0,0,0)",
			borderWidth: 0
		}
	};
	
	
	var dataStyle = {
		normal: {
			formatter: '{c}%',
			position: 'center',
			show: true,
			textStyle: {
				fontSize: '22',
				fontWeight: 'normal',
				color: '#fff'
			},
		}
	};
	var option = {
		title: [{
			text: data.title,
			left: '60%',
			top: '16%',
			textAlign: 'center',
			textStyle: {
				fontWeight: 'normal',
				fontSize: '30',
				color: '#fff',
				textAlign: 'center',
			},
			subtext:data.subtext,
			subtextStyle: {
				fontWeight: 'normal',
				fontSize: '26',
				color: '#A1A0A1',
				textAlign: 'center',
			},
		}],
	
		//第一个图表
		series: [{
				type: 'pie',
				hoverAnimation: false,
				radius: ['55%', '80%'],
				center: ['20%', '42%'],
				labelLine: {
					normal: {
						show: false
					}
				},
				label: {
					normal: {
						position: 'center'
					}
				},
				data: [{
						value: 1,
						itemStyle: {
							normal: {
								color: '#989B9E'
							}
						},
					}, 
	
				]
			},
			//上层环形配置
			{
				type: 'pie',
				hoverAnimation: false, 
				radius: ['55%', '80%'],
				center: ['20%', '42%'],
				startAngle: 90,
				labelLine: {
					normal: {
						show: false
					}
				},
				label: {
					normal: {
						position: 'center'
					}
				},
				data: [ {
						value: data.data1,
						itemStyle: placeHolderStyle,
					},{
						value: data.data2,
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
									offset: 1,
									color: '#C8B07D'
								}, {
									offset: 0,
									color: '#D27259'
								}])
							}
						},
						label: dataStyle,
					}
	
				]
			},
		]
	};
	chart.setOption(option);
}
function radar(id,data){
	var chart = echarts.init(document.getElementById(id));
	chart.clear();
	const indicator = data.indicator
	var option = {
		 tooltip: {
		   trigger: 'item',
		 },
	 
		 radar: {
		   center: ['50%', '50%'],
		   radius: '60%',
		   name: {
			 textStyle: {
			   color: '#fff',
			   fontSize: 26,
			   fontWeight: 400,
			 },
		   },
		   // TODO:
		   indicator: indicator,
		   splitArea: {
			 show: true,
			 areaStyle: {
			   color: ['rgba(0,0,0,0)'], 
			 },
		   },
		   axisLine: {
			 lineStyle: {
			   color: '#E6BE6F', 
			 },
		   },
		   splitLine: {
			 lineStyle: {
			   type: 'solid',
			   color: ['#E6BE6F'], 
			   width: 1, 
			 },
		   },
		 },
		 series: [
		   {
			 type: 'radar',
			 symbolSize: 5,
			 data: [
			   {
				 // TODO:
				 value: data.value,
				 name: data.name,
				 areaStyle: {
				   normal: {
					 color: {
					   type: 'radial',
					   x: 1,
					   y: 0.7,
					   r:0.9,
					   colorStops: [{
						 offset: 0, color: 'RGBA(188, 159, 100, 0.3)', // 0% 处的颜色
					   },
					   {
						 offset: 0.15, color: 'RGBA(188, 159, 100, 0.5)', // 100% 处的颜色
					   },
					   {
						 offset: 0.75, color: 'RGBA(188, 159, 100, 0.8)', // 100% 处的颜色
					   },
					   {
						 offset: 1, color: 'RGBA(209, 111, 86, 1)', // 100% 处的颜色
					   }],
					   global: false, // 缺省为 false
					 },
				   },
				 },
				 itemStyle: { // 折线拐点标志的样式。
				   normal: { // 普通状态时的样式
					 lineStyle: {
					   width: 1,
					   color:"rgba(0,0,0,0)"
					 },
					 opacity: 0.3,
				   },
				   emphasis: { // 高亮时的样式
					 lineStyle: {
					   width: 5,
					 },
					 opacity: 0,
				   },
				 },
				 lineStyle: {
				   color: "rgba(146, 225, 255, 1)",
				   width: 0
				 }
			   }
			 ],
		   }
		 ],
	   }
	chart.setOption(option);
}
function bar(id,data){
	var chart = echarts.init(document.getElementById(id));
	chart.clear();
	var option = {
		xAxis: {
		  type: 'category',
		  data: data.dataAxis,
		  axisTick: {
			alignWithLabel: true,
			lineStyle:{
			  color:'#94989C'
			}
		  },
		  axisLine:{
			lineStyle:{
			  color:'#94989C'
			}
		  },
		  axisLabel:{
			color:'#94989C',
			fontSize:26
		  }
		},
		yAxis: [{
		  type: 'category',
		  axisLine:{
			show:true,
			lineStyle:{
			  color:'#94989C',
			  fontSize:26
			}
		  },
		  axisLabel:{
			  fontSize:26
		  },
		  axisTick:{
			show:false
		  },
		  splitLine:{
			show:false
		  },
		  data: data.yAxis,
		},
		{
		  type: 'value',
		  axisLabel:{
			show:false
		  },
		  splitLine:{
			show:false
		  },
		}],
		tooltip: {
		  trigger: 'axis',
		  axisPointer: {
			type: 'cross',
			label: {
			  backgroundColor: '#283b56'
			}
		  }
		},
		legend: {
			top:20,
			textStyle:{
				color:"#999CA3",
				fontSize:26
			}
		},
		series: [
		  {
			name:data.data1.name,
			data: data.data1.value,
			type: 'bar',
			showBackground: true,
			yAxisIndex: 1,
			backgroundStyle: {
			  color: '#6A6868'
			},
			itemStyle: {
				normal: {
					barBorderRadius: [30,30,0,0],
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#D26E56'
					}, {
						offset: 0.4,
						color: 'rgba(255,212,112)'
					},{
						offset: 1,
						color: '#6A6868'
					}]),
					shadowBlur:0,
					shadowColor:'rgba(87,220,222,0.7)'
				},
			},
		  },{
			name:data.data2.name,
			data: data.data2.value,
			type: 'line',
			yAxisIndex: 1,
			symbolSize:0,
			lineStyle: {
			  color: '#EEC166',
			  type: 'dashed'
			},
			itemStyle:{
				color: '#EEC166',
			}
		  }
		]
}
	chart.setOption(option);
}
function line(id,data){
	var chart = echarts.init(document.getElementById(id));
	chart.clear();
	var option = {
		tooltip: {
		  trigger: 'axis',
		},
		legend: {
			top:20,
			textStyle:{
				color:"#999CA3",
				fontSize:26
			}
		},
		grid: {
		  left: '3%',
		  right: '4%',
		  bottom: '3%',
		  containLabel: true
		},
		xAxis: [
		  {
			type: 'category',
			data: data.dataAxis,
			boundaryGap: false,
				axisTick: {
					alignWithLabel: true,
					lineStyle:{
					  color:'#94989C'
					}
				},
				axisLine:{
					lineStyle:{
					  color:'#94989C'
					}
				},
				axisLabel:{
				  color:'#94989C',
				  fontSize:26
				}
		  }
		],
		yAxis: [{
				name:data.name,
				nameTextStyle:{
					color:"#999CA3",
					fontSize:26
				},
				type: 'value',
				axisLine:{
				  show:true,
				  lineStyle:{
					color:'#94989C',
					fontSize:26
				  }
				},
				axisLabel:{
					fontSize:26
				},
				axisTick:{
				  show:false
				},
				splitLine:{
				  show:false
				}
			  }
		],
		series: [
		  {
			name: data.data1.name,
			type: 'line',
			stack: 'Total',
			areaStyle: {},
			emphasis: {
			  focus: 'series'
			},
			symbolSize:0,
			itemStyle:{
				color: '#FDC06A',
			},
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'RGBA(253, 192, 106, 1)'
					},
					{
						offset: 0.5,
						color: 'RGBA(251, 251, 110, 0.6)'
					},
					{
						offset: 1,
						color: 'RGBA(253, 192, 106, 0.2)'
					},
				])
			},
			data: data.data1.value
		  },
		  {
			name: data.data2.name,
			type: 'line',
			stack: 'Total',
			areaStyle: {},
			emphasis: {
			  focus: 'series'
			},
			symbolSize:0,
			itemStyle:{
				color: 'RGBA(210, 110, 86, 1)',
			},
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'RGBA(210, 110, 86, 1)'
					},
					{
						offset: 0.5,
						color: 'RGBA(210, 110, 86, 0.6)'
					},
					{
						offset: 1,
						color: 'RGBA(253, 192, 106, 0.2)'
					},
				])
			},
			data: data.data2.value
		  },
		  {
			name: data.data3.name,
			type: 'line',
			stack: 'Total',
			areaStyle: {},
			emphasis: {
			  focus: 'series'
			},
			symbolSize:0,
			itemStyle:{
				color: 'RGBA(251, 251, 110, 1)',
			},
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'RGBA(251, 251, 110, 1)'
					},
					{
						offset: 0.5,
						color: 'RGBA(251, 251, 110, 0.6)'
					},
					{
						offset: 1,
						color: 'RGBA(210, 110, 86, 0.2)'
					},
				])
			},
			data: data.data3.value
		  }
		]
	  };
	chart.setOption(option);
}
function line2(id,data){
	var chart = echarts.init(document.getElementById(id));
	chart.clear();
	var option = {
		tooltip: {
		  trigger: 'axis',
		},
		legend: {
			top:20,
			textStyle:{
				color:"#999CA3",
				fontSize:26
			}
		},
		grid: {
		  left: '3%',
		  right: '4%',
		  bottom: '3%',
		  containLabel: true
		},
		xAxis: [
		  {
			type: 'category',
			data: data.dataAxis,
			boundaryGap: false,
				axisTick: {
					alignWithLabel: true,
					lineStyle:{
					  color:'#94989C'
					}
				},
				axisLine:{
					lineStyle:{
					  color:'#94989C'
					}
				},
				axisLabel:{
				  color:'#94989C',
				  fontSize:26
				}
		  }
		],
		yAxis: [{
				name:data.name,
				nameTextStyle:{
					color:"#999CA3",
					fontSize:26
				},
				type: 'value',
				axisLine:{
				  show:true,
				  lineStyle:{
					color:'#94989C',
					fontSize:26
				  }
				},
				axisLabel:{
					fontSize:26
				},
				axisTick:{
				  show:false
				},
				splitLine:{
				  show:false
				}
			  }
		],
		series: [
		  {
			name: data.data1.name,
			type: 'line',
			stack: 'Total',
			areaStyle: {},
			smooth: true,
			emphasis: {
			  focus: 'series'
			},
			symbolSize:0,
			itemStyle:{
				color: '#FDC06A',
			},
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'RGBA(253, 192, 106, 1)'
					},
					{
						offset: 0.5,
						color: 'RGBA(251, 251, 110, 0.6)'
					},
					{
						offset: 1,
						color: 'RGBA(253, 192, 106, 0.2)'
					},
				])
			},
			data: data.data1.value
		  },
		  {
			name: data.data2.name,
			type: 'line',
			stack: 'Total',
			areaStyle: {},
			smooth: true,
			emphasis: {
			  focus: 'series'
			},
			symbolSize:0,
			itemStyle:{
				color: 'RGBA(210, 110, 86, 1)',
			},
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'RGBA(210, 110, 86, 1)'
					},
					{
						offset: 0.5,
						color: 'RGBA(210, 110, 86, 0.6)'
					},
					{
						offset: 1,
						color: 'RGBA(253, 192, 106, 0.2)'
					},
				])
			},
			data: data.data2.value
		  }
		]
	  };
	chart.setOption(option);
}
function candlestick(id,data){
	var chart = echarts.init(document.getElementById(id));
	chart.clear();
	var option = {
		xAxis: {
			type: 'category',
			data: data.xAxis,
			axisTick: {
				alignWithLabel: true,
				lineStyle:{
				color:'#94989C'
				}
			},
			axisLine:{
				lineStyle:{
				color:'#94989C'
				}
			},
			axisLabel:{
			color:'#94989C',
			fontSize:26
			}
		},
		yAxis: {
			nameTextStyle:{
				color:"#999CA3",
				fontSize:26
			},
			type: 'value',
			axisLine:{
				show:true,
				lineStyle:{
					color:'#94989C',
					fontSize:26
				}
			},
			axisLabel:{
				fontSize:26
			},
			axisTick:{
				show:false
			},
			splitLine:{
				show:false
			}
		},
		series: [
		  {
			type: 'candlestick',
			itemStyle:{
			  color:"#FFFFDF",
			  color0:"#FFFFDF",
			  borderColor:"#FFD579",
			  borderColor0:"#FFD579"
			},
			data: data.data
		  }
		]
	  };
	chart.setOption(option);
}
function pie3(id,data){
	var chart = echarts.init(document.getElementById(id));
	chart.clear();
	var option = {
		series: [
			{
			type: 'pie',
			radius: '50%',
			data: data.data,
			label: {
				formatter: '{a|{b}}\n{b|{d}%}',
				rich: {
				a: {
					color: '#6E7079',
					fontSize:26,
					lineHeight: 60,
					padding:10,
					align: 'center',
					borderColor: '#626673',
					borderWidth: 1,
				},
				b: {
					color: '#fff',
					fontSize: 30,
					fontWeight: 'bold',
					align: 'left',
				},
				}
			},
		}]	
	};
	chart.setOption(option);
}
function gauge(id,data){
	var chart = echarts.init(document.getElementById(id));
	chart.clear();
	var option = {
		series: [
			{
				type: "gauge",
				radius: '100%',
				center: ["50%", "50%"],
				splitNumber: 0, //刻度数量
				startAngle: 180,
				endAngle: 0,
				axisLine: {
					show: true,
					lineStyle: {
						width: 20,
						color: [
							[
								1, new echarts.graphic.LinearGradient(
									0, 0, 1, 0, [{
											offset: 0,
											color: '#D37C5C',
										},
										{
											offset: 1,
											color: '#B1B2B2',
										}
									]
								)
							],
						],
					},
				},
				//分隔线样式。
				splitLine: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				detail:{
					show:false
				},
				pointer: {
					show: true,
					length: "60%",
					width: "2%",
					itemStyle:{
						color:"#D3D4D4"
					}
				},
				data: data.data,
			}
		],
	};
	chart.setOption(option);
}
function bar2(id,data){
	var chart = echarts.init(document.getElementById(id));
	chart.clear();
	let yLabel = data.yLabel
	let yData = data.yData
	let bgData = data.bgData
	var option = {
		grid: {
			left: '5%',
			right: '5%',
			bottom: '0%',
			top: '0%',
			containLabel: true
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'none'
			},
			formatter: function(params) {
				return params[0].name + '<br/>' +
					params[0].seriesName + ' : ' + params[0].value + ' <br/>'
			}
		},
		xAxis: {
			show: false,
			type: 'value'
		},
		yAxis: [{
			type: 'category',
			inverse: true,
			axisLabel: {
				show: true,
				margin:15,
				textStyle: {
					color: '#fff',
					fontSize:24,
				},
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			data: yLabel
		}, {
			type: 'category',
			inverse: true,
			axisTick: 'none',
			axisLine: 'none',
			show: true,
			axisLabel: {
				textStyle: {
					color: '#A1A0A1',
					fontSize: '24'
				},
			},
			data: yData
		}],
		series: [{
				name: '状态',
				type: 'bar',
				zlevel: 1,
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
							offset: 0,
							color: '#D16F56'
						}, {
							offset: 0.4,
							color: '#B18756'
						},{
							offset: 1,
							color: 'RGBA(177, 135, 86, 0.1)'
						}]),
						shadowBlur:0,
						shadowColor:'rgba(87,220,222,0.7)'
					},
				},
				barWidth: 20,
				data: yData
			},
			{
				name: '背景',
				type: 'bar',
				barWidth: 20,
				barGap: '-100%',
				data: bgData,
				itemStyle: {
					normal: {
						color: 'rgba(24,31,68,0)',
						barBorderRadius: [0,30,30,0],
					}
				},
			},
		]
	};
	chart.setOption(option);
}
